<template>
  <div 
    class="tab-bar-item"
    @click="itemClick">

    <div v-if="!isActive">
      <img :src="item.image" alt="">
    </div>
    <div v-else>
      <img :src="item.activeImage" alt="">
    </div>

    <span 
      :style="activeStyle">
      {{item.name}}
    </span>

  </div>
</template>

<script>
  export default {

    props: {

      item: {
        type: Object,
        default: {},
      },

      activeColor: {
        type: String,
        default: "",
      }

    },

    computed: {
      isActive() {
        return this.$route.path === this.item.path;
      },
      activeStyle() {
        return this.isActive ? {color: this.activeColor} : {};
      }
    },

    methods: {
      itemClick() {
        if(this.$route.path !== this.item.path)
          this.$router.push(this.item.path)
      }
    },

  }
</script>

<style scoped>
  .tab-bar-item {
    flex: 1;
    text-align: center;
  }

  .tab-bar-item img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    padding-top: 6px;
  }

  .tab-bar-item span {
    font-size: 16px;
    display: block;
    margin-top: 5px;
    color: black;
  }

</style>